<template>
  <el-main>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user' }">用户列表</el-breadcrumb-item>
      <el-breadcrumb-item>系统用户授权</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="margin-top-20">
      <el-card shadow="never">
        <h4
          class="margin-bottom-20"
          style="border-left: 3px solid #00a7cd;padding-left: 8px;"
        >
          当前用户
        </h4>
        <div>{{ user_base.realName }}（{{ user_base.accountName }}）</div>
        <h4
          class="margin-top-20 margin-bottom-20"
          style="border-left: 3px solid #00a7cd;padding-left: 8px;"
        >
          角色：
        </h4>
        <el-table
          :data="table_data"
          class="auth_user_table"
          ref="auth_user_table"
          style="width: 100%"
        >
          <el-table-column
            label="角色名称"
            prop="groupName"
            show-overflow-tooltip
            width="180"
          />
          <el-table-column
            label="创建人"
            prop="createUser"
            show-overflow-tooltip
            width="180"
          />

          <el-table-column label="创建日期" prop="ctime" width="180" />
          <el-table-column
            label="最近修改人"
            prop="updateUser"
            show-overflow-tooltip
            width="180"
          />
          <el-table-column label="最近修改日期" prop="utime" width="180" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleDetail(scope.row)"
                size="mini"
                type="text"
                >详情
              </el-button>
              <el-button
                size="mini"
                style="color: red"
                type="text"
                v-if="scope.row.id === user_base.authGroupId"
                >当前角色
              </el-button>
              <el-button
                @click="handleGrant(scope.row)"
                size="mini"
                type="text"
                v-else
                >授权
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="margin-top-10 clearfix">
          <el-pagination
            :current-page.sync="current_page"
            :page-size.sync="page_size"
            :page-sizes="[5, 10, 20]"
            :total="total_size"
            @current-change="load_table_data"
            @size-change="load_table_data"
            background
            class="pull-right"
            layout="total, sizes,  prev, pager, next"
          />
        </div>
      </el-card>

      <el-dialog
        :visible.sync="detailDialogVisible"
        title="角色详情"
        width="50%"
      >
        <el-row
          :gutter="20"
          :key="userRule.ruleName"
          style="margin-bottom: 40px;padding-bottom: 40px;border-bottom: 1px solid #ebebeb"
          v-for="userRule in rules"
        >
          <el-col :span="3">{{ userRule.ruleName }}</el-col>
          <el-col :span="21">
            <el-checkbox
              :key="userRuleAction.key"
              v-for="userRuleAction in userRule.ruleActions"
              v-model="userRuleAction.checked"
              >{{ userRuleAction.ruleAction }}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      userId: null,
      user_base: { realName: null, accountName: null, authGroupId: null },
      table_data: [],
      current_page: 1,
      page_size: 5,
      total_size: 0,
      multipleSelection: null,
      detailDialogVisible: false,
      rules: []
    };
  },
  mounted() {
    this.userId = this.$route.params.id;
    this.info();
    this.load_table_data();
  },
  methods: {
    info() {
      this.$ajax.user
        .info(this.userId)
        .then(result => {
          if (result.code != 1) {
            this.$message({
              message: result.msg,
              type: "warning"
            });
            this.$router.push("/user/list/");
          } else {
            this.user_base = result.data;
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        });
    },
    load_table_data() {
      return this.$ajax.auth
        .list({
          current_page: this.current_page,
          page_size: this.page_size
        })
        .then(response => {
          if (response.code == 1) {
            this.table_data = response.data.records;
            this.total_size = response.data.total;
          } else {
            this.$message({
              message: response.msg,
              type: "warning"
            });
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        });
    },
    handleDetail(row) {
      this.$ajax.auth
        .rules(row.id)
        .then(response => {
          if (response.code == 1) {
            this.rules = response.data.rules;
            this.detailDialogVisible = true;
          } else {
            this.$message({
              message: response.msg,
              type: "warning"
            });
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        });
    },
    handleGrant(row) {
      this.$ajax.user
        .grant({
          userId: this.userId,
          authGroupId: row.id
        })
        .then(response => {
          if (response.code == 1) {
            this.$message({
              type: "success",
              message: "授权成功!"
            });
            this.user_base.authGroupId = row.id;
          } else {
            this.$message({
              message: response.msg,
              type: "warning"
            });
          }
        })
        .catch(e => {
          console.log(e);
          this.$message({
            message: "系统繁忙，请稍后重试",
            type: "warning"
          });
        });
    }
  }
};
</script>
